<template>
  <div class="allPage">
    <el-row :gutter="15">
      <el-col :span="18">
        <el-card class="box-card-top">
          <div slot="header" class="cardClass_header">
            <h3>存栏疾病分析</h3>
            <div>
              <el-button size="mini" type="success" icon="el-icon-plus" @click="open('新增存栏疾病分析')">新增</el-button>
            </div>
          </div>
          <el-table :data="tableData" stripe v-loading="loading" size="small" border style="width: 100%">
            <el-table-column prop="id" type="index" label="序号" width="60px" align="center"></el-table-column>
            <el-table-column prop="changjianjibing" label="常见疾病" width="140px" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="dabingyuanyin" label="发病原因" align="left" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="pingjunzhiliaozhouqi" label="预防措施" align="left" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="yufangcuoshi" label="平均治疗周期" align="center" width="120px" show-overflow-tooltip>
            </el-table-column>
            <el-table-column align="center" width="250px">
              <template slot="header" slot-scope="scope">
                <div style="display:flex">
                  <el-input v-model="ruleForm.value" size="mini" placeholder="输入疾病类型搜索" />
                  <el-button type="primary" @click="submitForm('ruleForm')" size="mini" icon="el-icon-search"
                    style="margin-left:10px" circle></el-button>
                  <el-button @click="resetForm('ruleForm')" size="mini" icon="el-icon-refresh" circle></el-button>
                </div>
              </template>
              <template slot-scope="scope">
                <el-button type="warning" size="mini" icon="el-icon-edit"
                  @click="open('修改存栏疾病分析', scope.row)">修改</el-button>
                <el-button type="danger" size="mini" icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页开始 -->
          <el-pagination layout="total, prev, pager, next, jumper" :total="total"
            :page-size="ruleForm.pageSize" v-show="!loading" :current-page="ruleForm.pageNum" @current-change="changePage"
            style="float:right;margin-top:10px"></el-pagination>
          <!-- 分页结束 -->
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card-top">
          <sellingoods></sellingoods>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col :span="12">
        <el-card class="box-card-bottom">
          <div>
            <Newsalestrends></Newsalestrends>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card-bottom">
          <div>
            <totalsales></totalsales>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 新增修改组件开始 -->
    <addSalesData ref="addSalesDataRef" @func='search'></addSalesData>
    <!-- 新增修改组件结束 -->
  </div>
</template>

<script>
// 接口
import { deleteAPI, queryAPI } from "@/apis/dataSreening/salesdate.js";
// 新增组件
import addSalesData from "@/components/dataSreening/salesData/addSalesData";
// 可视化组件
import sellingoods from "@/components/dataSreening/salesData/sellingoods";
import Newsalestrends from "@/components/dataSreening/salesData/Newsalestrends";
import totalsales from "@/components/dataSreening/salesData/totalsales";
export default {
  name: "salesData",
  components: {
    addSalesData,
    sellingoods,
    Newsalestrends,
    totalsales,
  },
  data() {
    return {
      loading: false,
      total:0,
      ruleForm: {
        key: "changjianjibing",
        value: "",
        pageNum: 1,
        pageSize: 3,
      },
      tableData: []
    }
  },
  created() {
    this.search();
  },
  methods: {
    // 分页
      changePage(pageNum) {
        this.ruleForm.pageNum = pageNum;
        this.search();
      },
    // 重置
    resetForm(formName) {
      let _this = this;
      this.ruleForm.value = ''
      this.search(_this.ruleForm);
      this.ruleForm.pageNum = 1; // 查询重置页数
    },
    // 新增/修改弹窗
    open(title, row) {
      this.$refs.addSalesDataRef.show(title, row);
    },
    // 搜索
    submitForm() {
      const _this = this;
      _this.ruleForm.pageNum = 1; // 查询重置页数
      _this.search(_this.ruleForm);
    },
    // 删除
    del(row) {
      console.log(row);
      const _this = this;
      _this
        .$confirm("确认删除？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          deleteAPI(row.id).then(function (res) {
            // console.log(res);
            if (res.code === 0) {
              _this.$message({
                type: "success",
                message: res.msg,
              });
              _this.search();
              _this.ruleForm.pageNum = 1; // 查询重置页数
            } else {
              _this.$message({
                type: "error",
                message: res.msg,
              });
            }
          });
        })
        .catch(() => { });
    },
    // 搜索方法
    search() {
      const _this = this;
      _this.loading = true;
      queryAPI(_this.ruleForm).then((res) => {
        _this.tableData = res.data;
        _this.total = res.total;
        _this.loading = false;
      });
    },
  },
};
</script>

<style scoped>
.box-card-top {
  height: 290px;
  margin-bottom: 15px;
}

.box-card-bottom {
  height: calc(100vh - 430px);
}
</style>